<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表-青鸟优品</title>
    <link rel="stylesheet" href="./assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./assets/css/common.css">
    <link rel="stylesheet" href="./assets/css/list.css">
    <script src="./assets/js/jquery.js"></script>
    <script src="./assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="./assets/js/common.js"></script>
    <script src="./assets/layer/layer.js"></script>
    <style>
        .pagination li.active>a,
        .pagination li.active>a:hover,
        .pagination li.active>a:active {
            background-color: rgb(225, 37, 27);
            color: #FFF;
            cursor: pointer;
            border: 0;
        }
    </style>
    <script>
        $(function () {
            $(".btn-search").on('click', function () {
                var keywords = $("#keywords").val().trim();
                if (keywords === '') {
                    layer.msg('请输入搜索关键词');
                } else {
                    // 跳转到商品搜索页面
                    location.href = `/search.html?keywords=${keywords}`;
                }
            });
            // 点击回车键, 执行搜索操作
            $("#keywords").on('keyup', function (event) {
                // 阻止默认事件
                // event.preventDefault();
                if (event.keyCode === 13) {
                    // 更新搜索关键词
                    var keywords = $(this).val().trim();
                    location.href = `/search.html?keywords=${keywords}`;
                }
            });
        });
    </script>
    <!-- 
        商品素材来自京东
        https://new.jd.com/?innerAnchor=100011386594_100012254352_100006378137_100011529848&focus=1 
    -->
</head>

<body>

    <nav class="navbar navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="./index.html">青鸟商城</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-left">
                    <!-- <li class="active"><a href="./list.html">热门推荐 <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">国际品牌</a></li>
                    <li><a href="#">数码电器</a></li>
                    <li><a href="#">每日特价</a></li> -->
                </ul>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="./login.html">登录</a></li>
                    <li><a href="./reg.html">注册</a></li>
                </ul>

            </div>
        </div>
    </nav>
    <div class="container goods-list">

        <!-- 商品搜索 -->
        <div class="row">
            <div class="col-xs-12">
                <div class="form-inline form-search">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon icon-search">
                                <i class="glyphicon glyphicon-search"></i>
                            </span>
                            <input type="text" class="form-control input-lg" id="keywords" placeholder="请输入搜索关键词">
                            <div class="input-group-addon btn-search">搜索</div>
                        </div>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <span class="text-muted">
                            <a href="#">京造夏凉节</a>
                            &nbsp;|&nbsp;
                            <a href="#">尖货手机</a>
                            &nbsp;|&nbsp;
                            <a href="#">电脑整机</a>
                            &nbsp;|&nbsp;
                            <a href="#">除草剂</a>
                            &nbsp;|&nbsp;
                            <a href="#">小家电</a>
                            &nbsp;|&nbsp;
                            <a href="#">美妆好礼</a>
                            &nbsp;|&nbsp;
                            <a href="#">通信5G季</a>
                        </span>
                    </div>
                </div>

            </div>
        </div>

        <!-- 商品列表 -->
        <div class="row list">

            <!-- <div class="col-xs-3">
                <div class="thumbnail">
                    <img src="./uploads/12.png" alt="">
                    <h5>新款iPhoneSE全新上市</h5>
                    <p class="text-muted">以旧换新至高补贴300元</p>
                    <div class="buy-btn">立即抢购</div>
                </div>
            </div> -->

        </div>



    </div>



    <!-- 分页导航 -->
    <div class="container">
        <nav aria-label="Page navigation clearfix">
            <ul class="pagination pagination-lg pull-right">
                <!-- <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li> -->
            </ul>
            <!-- <ul class="pager">
                <li><a href="#">上一页</a></li>
                <li><a href="#">下一页</a></li>
            </ul> -->
        </nav>
    </div>


    <div class="container-fluid footer">
        <div class="row">
            <div class="col-lg-12">
                Copyright 2019 by www.braccp.com 北京畅想唯优信息技术有限公司 All rights reserved.
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">
                联系电话：029-88212666 地址：西安市雁塔区电子一路 石油大学北门工会楼二层
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                备案号：陕ICP备19013769号-1
            </div>
        </div>
    </div>

    <div class="fixed-nav-right">
        <!-- 返回首页 -->
        <div class="fixed-home">
            <a href="./index.html">
                <i class="glyphicon glyphicon-home"></i>
            </a>
        </div>
        <!-- 购物车 -->
        <div class="fixed-cart">
            <a href="./cart.html">
                <i class="glyphicon glyphicon-shopping-cart"></i>
            </a>
        </div>
        <!-- 返回顶部 -->
        <div class="back-top">
            <i class="glyphicon glyphicon-chevron-up"></i>
        </div>
    </div>

</body>
<script>
    // 未完待续...
    // var page = location.search.split('=')[1] || 1;
    var page=parseUrl(location.search,'page')||1;
    var cid=parseUrl(location.search,'cid')||0;
    var page_num = 10;
    var data={ page, page_num };
    if(cid!==0){
        data.cid=cid;
    }

    $(function () {
        $.ajax({
            url: '/apis/index.php?c=product&a=list',
            type: 'GET',
            dataType: 'json',
            data
        }).then(res => {
            console.log(res);
            if (res.errcode == 0 && res.data.list) {
                var list = res.data.list;
                var html = '';
                list.forEach(item => {
                    html += `
                    <div class="col-xs-3">
                        <div class="thumbnail">
                            <a title="${item.name}" href="/detail.html?id=${item.id}">
                                <img src="${item.cover}" alt="">
                                <h5>${item.name}</h5>
                                <p class="text-muted">${item.description.substr(0, 40)}...</p>
                                <div class="buy-btn">立即抢购</div>
                            </a>
                        </div>
                    </div>
                    `
                });

                // 将商品列表渲染到页面上
                $(".list").html(html);
                // 计算分页按钮的数量
                var count = Math.ceil(res.data.total / page_num);
                var pageStr = ``;
                for (var i = 1; i <= count; i++) {
                    var query=cid!==0?`cid=${cid}&page=${i}`:`page=${i}`;
                    var active=i == page?'active':'';
                    pageStr += `<li  class="${active}"><a href="/list.html?${query}">${i}</a></li>`;
                }
                $(".pagination").html(pageStr);
            }
        });
    });
    // 解析查询字符串的函数
    function parseUrl(url,key) {
        var url=url.substr(1);
        var arr=url.split('&');
        var res;
        arr.forEach(item=>{
            var  arr1=item.split('=');
            if(arr1[0]===key){
                res=arr1[1];
            }
        });
        return res;
    }
</script>

</html>